import router from '@/router'
import store from '@/store'
// 进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from './utils/get-page-title'
import { asyncRoutes } from '@/router'

//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)

// 设置白名单
const whiteList = ['/404', '/login']
router.beforeEach(async(to, from, next) => {
  // console.log('我要去的路径:', to.path, '我是从:', from.path, '来的')

  // 调用了get-page-title里面的一个封装的函数，可以显示我们操作的路径
  document.title = getPageTitle(to.meta.title)
  NProgress.start()
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      // console.log('已经存在token了,不会跳登录页，现在去首页')
      next('/')
      NProgress.done()
    } else {
      // console.log('token存在不是去登录页,给与放行')
      if (!store.state.user.userInfo.userId) {
        // 前面加上await与async 是便于我们获取信息之后再去跳转以达到：页面跳转前我们的数据就收到了，否则可能会因为网速等原因报错
        const menus = await store.dispatch('user/getUserInfo')
        console.log(menus, 'menus')// 我们用户所拥有的权限
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)// 判断布尔值，是true就可以执行过滤，false就不需要
        }
        )
        console.log(filterRoutes, 'filterRoutes')

        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRoutes)
        // 将拥有权限的路由表存入vuex,再执行渲染
        store.commit('menu/setMenuList', filterRoutes)
        /* 不加下面的代码会出现白屏的问题，因为页面刷新的时候会重新执行addRouters,而addRoutes没有执行完成 */
        next({ ...to, replace: true })
      } else {
        next()
      }
    }
  } else {
    // includes()用于判断内容是否在数组当中，返回值是true/false
    if (whiteList.includes(to.path)) {
      console.log('在白名单内,放行')
      next()
    } else {
      console.log('可以去任何你想去的位置')
      next('/login')
      NProgress.done()
    }
  }
})

// 后置守卫，用于处理跳转结束之后的回调
router.afterEach(() => {
  NProgress.done()
})
